<template>

    <div>

        <h2>话费充值套餐</h2>

        <div class="container">

            <div style="margin-bottom: 20px;">
                <el-button type="default" @click="add">添加话费套餐</el-button>
            </div>

            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24" v-for="item in items" :key="item.id">
                    <el-card class="box-card"
                             style="margin-top: 10px;">
                        <div slot="header" class="clearfix">
                            <span>{{item.title}}</span>
                            <span v-if="item.only_first" class="my-tag">新手专享</span>
                            <p style="float: right; padding: 0; margin: 0">
                                <el-button size="small"  type="default" @click="edit(item)">修改</el-button>
                                <el-button size="small" type="danger" @click="remove(item.id)">删除</el-button>
                            </p>

                        </div>
                        <div class="text">
                            <el-tag>折扣：{{item.discount * 10}} 折</el-tag>
                            <el-tag type="danger">期数：{{item.months}}个月</el-tag>
                            <el-tag>充值限制：￥{{item.min_amount}} - ￥{{item.max_amount}}</el-tag>
                            <el-tag>能否使用优惠券：<span v-if="item.canuse_coupon">是</span><span v-else>否</span></el-tag>
                            <el-tag>角标：<el-tag type="success" v-if="item.tag != ''">{{item.tag}}</el-tag></el-tag>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </div>

        <el-dialog
                title="表单"
                :visible.sync="dialogVisible"
                width="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="160px">

                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="期数">
                    <el-input v-model="form.months">
                        <template slot="append">个月</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="折扣">
                    <el-input v-model="form.discount"><template slot="append">折</template></el-input>
                    <el-alert
                            title="如8.2折请输入0.82"
                            type="success">
                    </el-alert>
                </el-form-item>
                <el-form-item label="最低充值">
                    <el-input v-model="form.min_amount">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="最高充值">
                    <el-input v-model="form.max_amount">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="角标">
                    <el-input v-model="form.tag"></el-input>
                </el-form-item>
                <el-form-item label="可否使用优惠券">
                    <el-switch
                            v-model="form.can_use_coupon"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>

                <el-form-item label="新手专享">
                    <el-switch
                            v-model="form.only_first"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>

            </el-form>


            <div style="text-align: center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<style>
    .my-tag {
        background-color: rgba(64,158,255,.1);
        padding: 5px 10px;
        font-size: 14px;
        color: #409EFF;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid rgba(64,158,255,.2);
        margin: 0;
    }
</style>
<script>
    export default {
      data() {
        return {
          items: [],
          loading: true,
          params: {
            //
          },
          form: {

          },
          dialogVisible: false,
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/mobile_recharge', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            console.log(err);
            this.$message('系统错误');
            this.loading = false;
          })
        },

        remove(id) {
          this.$confirm('确定要删除吗？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
            .then(() => {
                this.destroy(id);
            })
            .catch(action => {

            });
        },

        add() {
           this.dialogVisible = true;
           this.form.parent = null;
           this.form.is_category = 1;
           this.form.intro = '';
           this.form.parent_id = 0;
        },

        save() {
          if (this.form.id !== undefined) {
            this.update();
          } else {
            this.store();
          }
        },

        store() {
          axios.post('/admin/api/mobile_recharge', this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        update() {
          axios.put('/admin/api/mobile_recharge/' + this.form.id, this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        edit(item) {
          this.dialogVisible = true;
          this.form = Object.assign({}, item);
        },

        destroy(id) {
          axios.delete('/admin/api/mobile_recharge/' + id).then((res) => {
            if (res.data.code === 0) {
              this.fetch();
              this.$message.success('删除成功');
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          });

        }

      }
    }
</script>